<template>
    <a-modal
      v-model="showModel"
      width="700px"
      destroyOnClose
      :maskClosable="false"
    >
      <template slot="title">
        <span class="enroll_line"></span>
        <span>参展报名</span>
      </template>
      <h3>{{ title }}</h3>
      <div class="enroll_form">
        <a-form :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="角色">
            <a-select
              v-decorator="[ 'role', {rules: [{required: true, message: '请选择角色' }]}]"
              placeholder="请选择角色"
              @change="handleSelectChange"
            >
              <a-select-option :value="0">参展商</a-select-option>
              <a-select-option :value="1">嘉宾</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="公司名称">
            <a-input
              v-decorator="['corporateName', {rules: [{required: true, message: '请输入公司名称'}]}]"
              placeholder="请输入公司名称"/>
          </a-form-item>
          <a-form-item label="联系人">
            <a-input
              v-decorator="['contact', {rules: [{required: true, message: '请输入联系人'}]}]"
              placeholder="请输入联系人"/>
          </a-form-item>
          <a-form-item label="联系电话">
            <a-input
              v-decorator="['phone', {rules: [{required: true, message: '请输入联系电话'},{pattern: telephoneReg, message: '电话号码格式不正确'}]}]"
              placeholder="请输入联系电话"/>
          </a-form-item>
          <a-form-item label="联系邮箱">
            <a-input
              v-decorator="['contactQq', {rules: [{required: false, message: '请输入联系邮箱'}]}]"
              placeholder="请输入联系邮箱"/>
          </a-form-item>
          <a-form-item label="联系地址">
            <a-input
              v-decorator="['address', {rules: [{required: false, message: '请输入联系地址'}]}]"
              placeholder="请输入联系地址"/>
          </a-form-item>
          <a-form-item label="职务">
            <a-input
              v-decorator="['post', {rules: [{required: false, message: '请输入您的职务'}]}]"
              placeholder="请输入您的职务"/>
          </a-form-item>
          <a-form-item label="备注">
            <a-input
              v-decorator="['content', {rules: [{required: false, message: '请输入备注'}]}]"
              placeholder="请输入备注"/>
          </a-form-item>
        </a-form>
        <!--<a-row>-->
        <!--  <a-input-->
        <!--    class="seach-width"-->
        <!--    style="width: 400px"-->
        <!--    placeholder="公司名称（必填）"-->
        <!--    v-model="form.corporateName"-->
        <!--  />-->
        <!--</a-row>-->
        <!--<a-row class="MT10">-->
        <!--  <a-input-->
        <!--    class="seach-width"-->
        <!--    style="width: 142px"-->
        <!--    placeholder="联系人（必填）"-->
        <!--    v-model="form.contact"-->
        <!--  />-->
        <!--  <a-input-->
        <!--    class="seach-width"-->
        <!--    style="width: 252px"-->
        <!--    placeholder="联系电话（必填）"-->
        <!--    v-model="form.phone"-->
        <!--  />-->
        <!--</a-row>-->
        <!--<a-row class="MT10">-->
        <!--  <a-input-->
        <!--    class="seach-width"-->
        <!--    style="width: 400px"-->
        <!--    placeholder="联系QQ（选填）"-->
        <!--    v-model="form.contactQq"-->
        <!--  />-->
        <!--</a-row>-->
        <!--<a-row class="MT10">-->
        <!--  <a-input-->
        <!--    class="seach-width"-->
        <!--    style="width: 400px"-->
        <!--    placeholder="推荐人（选填）"-->
        <!--    v-model="form.referrer"-->
        <!--  />-->
        <!--</a-row>-->
        <!--<a-row class="MT10">-->
        <!--  <a-input-->
        <!--    class="seach-width"-->
        <!--    style="width: 400px"-->
        <!--    placeholder="请输入您的职务（选填）"-->
        <!--    v-model="form.post"-->
        <!--  />-->
        <!--</a-row>-->
        <!--<a-row class="MT10">-->
        <!--  <a-input-->
        <!--    class="seach-width"-->
        <!--    style="width: 400px"-->
        <!--    placeholder="请输入内容（选填）"-->
        <!--    v-model="form.content"-->
        <!--  />-->
        <!--</a-row>-->
      </div>
      <template slot="footer">
        <div class="enroll_cancel" @click="handleCancel">取消</div>
        <a-button :loading="isEnroll" class="enroll_submit" @click="handleOk"
          >提交报名</a-button
        >
      </template>
    </a-modal>
  </template>
  
    <script>
  let telephoneReg = /(^(0\d{2,3}-?)?\d{7,8})$|(^[1][3,4,5,6,7,8,9][0-9]{9}$)|^(400|800)\d{7}$/
  
  export default {
  
    data() {
      return {
        showModel: false,
        form: {},
        title: "",
        exhibitionsId: "",
        isEnroll: false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12 },
        },
        telephoneReg: telephoneReg
      };
    },
    watch: {
      showModel(val) {
        this.form =  this.$form.createForm(this, { name: 'enrollModalForm' })
      }
    },
    mounted() {},
    methods: {
      //取消
      handleCancel() {
        this.showModel = false;
      },
      //确认
      handleOk() {
        // if(!this.form.corporateName) {
        //   this.$message.error("公司名称不能为空");
        //   return false
        // }
        // if(!this.form.contact) {
        //   this.$message.error("联系人不能为空");
        //   return false
        // }
        // if(!this.form.phone) {
        //   this.$message.error("联系电话不能为空");
        //   return false
        // }
        // if (!telephoneReg.test(this.form.phone)) {
        //   this.$message.error("电话号码格式不正确");
        //   return false
        // }
        this.form.validateFields((error, values) => {
          if (!error) {
            const params = {
              exhibitionsId: this.exhibitionsId,
              ...values
            }
            this.isEnroll = true;
  
            this.$http
              .post(
                appConfig.microServModules.supplierrest +
                "api/popularExhibitions/savePopularExhibitionsEnroll",
                params
              )
              .then((res) => {
                this.isEnroll = false;
                if (res.data.code == 0) {
                  this.$message.success("报名成功");
                  this.showModel = false;
  
                }
              });
          }
        });
      },
      //打开目录选择框
      open() {
        this.showModel = true;
      },
      setTitleAndId(title, id) {
        this.title = title;
        this.exhibitionsId = id;
      },
      handleSelectChange(value) {
        // console.log(value);
        // this.form.setFieldsValue({
        //   note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
        // });
      },
    },
    created() {
      // this.getMock();
    },
  };
  </script>
  
  <style scoped lang="scss">
  $colorPrimary: #c29a62;
  
  /deep/ .ant-input:focus,
  .ant-input:hover {
    border-color: $colorPrimary;
  }
  /deep/ .ant-modal-body {
    padding: 15px 24px;
  }
  .enroll_line {
    width: 2px;
    height: 19px;
    border-radius: 1px;
    opacity: 1;
    display: inline-block;
    background: #c29a62;
    vertical-align: middle;
  }
  .enroll_cancel {
    width: 68px;
    height: 32px;
    border-radius: 4px;
    opacity: 1;
    line-height: 32px;
    text-align: center;
    background: #ffffff;
    display: inline-block;
  
    border: 1px solid #c7c7c7;
  }
  .enroll_submit {
    width: 96px;
    height: 32px;
    border-radius: 4px;
    opacity: 1;
    line-height: 32px;
    text-align: center;
    background: #c29a62;
    display: inline-block;
    color: #fff;
    border: 1px solid #c29a62;
  }
  .enroll_form {
    width: 100%;
    //height: 282px;
    background-color: #fafafa;
    padding: 22px 0;
    margin-top: 10px;
  }
  </style>
  